
<template>
    <div class="p-2">
        <transition 
        :enter-active-class="proxy?.animate.searchAnimate.enter"
        :leave-active-class="proxy?.animate.searchAnimate.leave">
            <div class="search">
                <el-form :model="queryParams" :inline="true" ref="queryFormRef">
                    <!-- <el-form-item label="产品大类" prop="totalCategory">
                        <el-select v-model="queryParams.totalCategory" placeholder="请选择">
                            <el-option label="不锈钢餐具" value="1"></el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-form-item label="半成品小类" prop="productSubcategoryType">
                        <el-select v-model="queryParams.productSubcategoryType" placeholder="请选择">
                            <el-option v-for="item in singleCategoryList" :key="item.id" :label="item.subclassName" :value="item.subclassType"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="启用状态" prop="status">
                        <el-select v-model="queryParams.status" placeholder="请选择">
                            <el-option label="启用" :value="1"></el-option>
                            <el-option label="停用" :value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="模糊搜索" prop="specsDetail">
                        <el-input v-model="queryParams.specsDetail" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </transition>
        <el-card shadow="never">
            <template #header>
                <el-row :gutter="8" class="mb8">
                    <el-col class="header-button-container" :span="1.5">
                        <el-button type="success" plain icon="Plus" @click="handleClickAdd">新增</el-button>
                    </el-col>
                    <!-- <el-col class="header-button-container" :span="1.5">
                        <el-button type="warning" plain icon="DocumentAdd" @click="handleClickRecordPreparedProduct">录入半成品部件</el-button>
                    </el-col> -->
                    <!-- <el-col class="header-button-container" :span="1.5">
                        <el-button type="primary" plain icon="DocumentAdd" @click="handleClickAddSingleCategory">新增材料小类</el-button>
                    </el-col> -->
                    <!-- <el-col class="header-button-container" :span="1.5">
                        <el-button type="info" plain icon="CirclePlus" @click="handleClickEditProcess">编辑生产工序</el-button>
                    </el-col> -->
                    <el-col :span="1.5" :offset="1">
                        <span class="price-tip">库存金额：￥{{ inventoryAmount }}</span>
                    </el-col>
                    <el-col :span="1.5" :offset="1">
                        <span class="price-tip">库存金额(成本)：￥{{ inventoryCostAmount }}</span>
                    </el-col>
                </el-row>
            </template>
            <el-table :data="productList" :loading="loading">
                <el-table-column label="状态" align="center">
                    <template #default="scope">
                        <span :class="`min-inventory ${scope.row.status == 0?'alert':'not-alert'}`"> {{ scope.row.status == 0?'停用':'正常' }} </span>
                    </template>
                </el-table-column>
                <el-table-column label="半成品小类" prop="productCategoriesName" align="center"></el-table-column>
                <el-table-column label="具体名称" prop="specsDetail" align="center"></el-table-column>
                <el-table-column label="单价" align="center">
                    <template #default="scope">
                        <span> {{ `￥${scope.row.price}` }} </span>
                    </template>
                </el-table-column>
                <el-table-column label="最低库存" prop="lowInventory" align="center"></el-table-column>
                <el-table-column label="当前库存数" align="center">
                    <template #default="scope">
                        <span :style="{color:`${scope.row.currentInventory > scope.row.lowInventory? 'green' : 'red'}`}">{{ scope.row.currentInventory }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="采购冻结库存" prop="productFreezeInventory" align="center"></el-table-column>
                <el-table-column label="库存金额" align="center">
                    <template #default="scope">
                        <span> {{ `￥${scope.row.inventoryMoney}` }} </span>
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-tooltip content="查看包含部件" placement="top">
                            <el-button link type="warning" :style="{fontSize:'16px'}"  icon="Search" @click="handleClickCheckComponents(scope.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip content="编辑" placement="top">
                            <el-button link :style="{fontSize:'16px',color:'#69AFF0'}"  icon="Edit" @click="handleClickEdit(scope.row)"  ></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button link :style="{fontSize:'16px',color:'#F75C4E'}"  icon="Delete" @click="handleClickDelete(scope.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip content="录入半成品部件" placement="top">
                            <el-button link :style="{fontSize:'16px'}"  icon="DocumentAdd" @click="handleClickRecordPreparedProduct(scope.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip content="下订单" placement="top">
                            <el-button link :style="{fontSize:'16px',color:'#B886F8',margin:0}"  icon="BottomRight" @click="handleClickOrder(scope.row)"></el-button>
                        </el-tooltip>
                        
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="totalData > 0" :total="totalData" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                @pagination="getSemiProductList" />
        </el-card>
        <addPreparedProduct :visible="addPreparedProductVisible" :single="singleCategoryList" @submit="handleSubmitAdd" @close="handleCloseAdd" />
        <editPreparedProduct :visible="editPreparedProductVisible" :single="singleCategoryList" :data="productInfo" @submit="handleSubmitEdit" @close="handleCloseEdit" />
        <editProcess :visible="editProcessVisible" :processes="processList" @addProcess="handleAddNewProcess" @close="handleCloseEditProcess"/>
        <orderPreparedProduct :visible="orderPreparedProductVisible" :paper="paper_type" :data="productInfo" :processes="processList" :constituteInfo="constituteInfo" :knifeModels="knifeModelList" @close="handleCloseOrder" @submit="handleSubmitOrder" />
        <!-- <addSingleCategory :visible="addSingleCategoryVisible" @close="handleCloseAddSingleCategory"/> -->
        <checkComponents :visible="checkComponentsVisible" :data="productInfo" :warehouses="entrepot_type" :semi="semiConstitutes" @close="handleCloseCheckComponents" />
        <recordPreparedProduct :visible="recordPreparedProductVisible" :data="productInfo" :processes="processList" :knifeModels="knifeModelList" :componentType="component_type" :paper="paper_type" @submit="handleAddSubmitPreparedProduct" @close="handleCloseRecordPreparedProduct"/>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import { ElTable } from 'element-plus';
import { preparedProductVO } from '@/api/sj/warehouse/productInventory/types';
import { getSingleByTotalApi } from '@/api/sj/warehouse/typeManagement';
import { getSemiProductListApi,getSemiProductByIdApi,deleteSemiProductApi,getProcessApi,getSemiConstituteInfoApi, getConstituteInfoByIdApi } from '@/api/sj/warehouse/productInventory';
import { getKnifeModelNoPageApi } from '@/api/sj/warehouse/knifeModel';
import addPreparedProduct from './components/addPreparedProduct.vue';
import editPreparedProduct from './components/editPreparedProduct.vue';
import editProcess from './components/editProcess.vue';
import orderPreparedProduct from './components/orderPreparedProduct.vue';
// import addSingleCategory from './components/addSingleCategory.vue';
import checkComponents from './components/checkComponents.vue';
import recordPreparedProduct from './components/recordPreparedProduct.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { paper_type,component_type, entrepot_type } = toRefs<any>(proxy?.useDict('paper_type','component_type','entrepot_type'));
/** 半成品材料大类类型 */
const majorType = 'simi-product';
const queryFormRef = ref<FormInstance>();
const loading = ref(false);
const totalData = ref(0);
const inventoryAmount = ref<number>(0);
const inventoryCostAmount = ref<number>(100000);
const singleCategoryList = ref<any[]>();
const productList = ref<preparedProductVO[]>([]);
const addPreparedProductVisible = ref(false);
const editPreparedProductVisible = ref(false);
const editProcessVisible = ref(false);
const processList = ref<any[]>([]);
const productInfo = ref<any>();
const orderPreparedProductVisible = ref(false);
const orderPreparedProductData = ref<preparedProductVO>();
const addSingleCategoryVisible = ref(false);
const checkComponentsVisible = ref(false);
const semiConstitutes = ref<any[]>([]);
const recordPreparedProductVisible = ref(false);
const knifeModelList = ref<any[]>([]);
const constituteInfo = ref<any>();

const data = reactive({
    queryParams:{
        status: undefined,
        productSubcategoryType: undefined,
        specsDetail: undefined,
        pageNum: 1,
        pageSize: 30
    }
});

const { queryParams } = toRefs(data);

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getSemiProductList();
};

const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};

/** 获取半成品的材料小类 */
const getSingleCatagory = async () => {
    const { data } = await getSingleByTotalApi(majorType,'');
    singleCategoryList.value = data;
};


/** 获取半成品材料列表 */
const getSemiProductList = async () => {
    loading.value = true;
    const result = await getSemiProductListApi(queryParams.value);
    //@ts-ignore
    totalData.value = result.dataList.total;
    //@ts-ignore
    productList.value = result.dataList.records;
    //@ts-ignore
    inventoryAmount.value = result.inventoryAmount;
    loading.value = false;
};

/** 获取生产工序 */
const getProcesses = async () => {
    const { data } = await getProcessApi();
    processList.value = data;
};

const getKnifeModelList = async () => {
    const { data } = await getKnifeModelNoPageApi();
    knifeModelList.value = data;
};

/**新增半成品库存 */
const handleClickAdd = ()=>{
    addPreparedProductVisible.value = true;
};

const handleSubmitAdd = (result: boolean) => {
    if(result){
        //刷新列表
        getSemiProductList();
    }
};

const handleCloseAdd = ()=>{
    addPreparedProductVisible.value = false;
};

/**编辑半成品库存 */
const handleClickEdit = async (row:preparedProductVO)=>{
    const {code, data} = await getSemiProductByIdApi(row.id);
    if(code == 200){
        editPreparedProductVisible.value = true;
        productInfo.value = data;
    };
};

const handleSubmitEdit = (result: boolean) => {
    if(result){
        getSemiProductList()
    }
};

const handleCloseEdit = ()=>{
    editPreparedProductVisible.value = false;
};

/** 删除半成品库存 */
const handleClickDelete = async(row:preparedProductVO)=>{
    await proxy?.$modal.confirm("确认要把此条信息放入回收站？？");
    const { code } = await deleteSemiProductApi(row.id);
    if(code == 200){
        getSemiProductList();
        proxy?.$modal.msgSuccess("放入回收站成功");
    };
    
};

/** 编辑生产工序 */
const handleClickEditProcess = ()=>{
    editProcessVisible.value = true;
};

const handleCloseEditProcess = ()=>{
    editProcessVisible.value = false;
};

const handleAddNewProcess = (newProcess:any)=>{
    processList.value.push(newProcess);
};

/** 点击下订单 */
const handleClickOrder = async (row:preparedProductVO)=>{
    const {code, data} = await getSemiProductByIdApi(row.id);
    const result = await getConstituteInfoByIdApi(row.id);
    if(code == 200 && result.code == 200){
        orderPreparedProductVisible.value = true;
        productInfo.value = data;
        constituteInfo.value = result.data;
    };
};

const handleSubmitOrder = (result: boolean) => {
    if(result){
        getSemiProductList();
    };
};

/** 关闭下订单 */
const handleCloseOrder = ()=>{
    orderPreparedProductVisible.value = false;
};

/**点击新增小类 */
const handleClickAddSingleCategory = ()=>{
    addSingleCategoryVisible.value = true;
};

const handleCloseAddSingleCategory = ()=>{
    addSingleCategoryVisible.value = false;
};

/** 点击查看包含部件 */
const handleClickCheckComponents = async (row:preparedProductVO)=>{
    const {code, data} = await getSemiProductByIdApi(row.id);
    const result = await getSemiConstituteInfoApi(row.id);
    // getKnifeModelList();
    if(code == 200 && result.code == 200){
        checkComponentsVisible.value = true;
        productInfo.value = data;
        semiConstitutes.value = result.data;
    };
};


const handleCloseCheckComponents = ()=>{
    checkComponentsVisible.value = false;
};

/** 点击录入半成品部件 */
const handleClickRecordPreparedProduct = async (row:preparedProductVO)=>{
    const {code, data} = await getSemiProductByIdApi(row.id);
    if(code == 200){
        recordPreparedProductVisible.value = true;
        productInfo.value = data;
    };
};

const handleAddSubmitPreparedProduct = (result: boolean) => {
    if(result){
        getSemiProductList();
    }
};

const handleCloseRecordPreparedProduct = ()=>{
    recordPreparedProductVisible.value = false;
};

onMounted(()=>{
    getSingleCatagory();
    getSemiProductList();
    getProcesses();
    getKnifeModelList();
});

</script>

<style lang="scss" scoped>
.price-tip{
    display: flex;
    align-items: center;
    height: 100%;
}
.alert{
    color: #F75C4E;
    line-height: 10;
}
.not-alert{
    line-height: 10;
}
.dialog-footer{
    display: flex;
    justify-content: center;
}
</style>